<template>
  <div class="login">
    <h3>请登录</h3>
    <div class="form">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item label="昵称">
          <el-col :span="20">
            <el-input
              v-model="form.name"
              placeholder="请输入昵称"
              @keyup.enter.native="loginHandel()"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-button type="primary" @click="loginHandel">登录</el-button>      
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  components: {},
  created: function () {},
  methods: {
    loginHandel() {
      if (this.form.name == "") {
        this.$message.error("请输入昵称");
        return;
      }

      this.$router.replace({
        name: "Home",
        params: {
          name: this.form.name,
        },
      });
    }, 
  },
  data() {
    return {
      form: {
        name: "",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 600px;
  height: 200px;
  margin: 150px auto;
  text-align: center;
  border: 1px #cccc solid;
  border-radius: 5px;
  padding: 20px 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: white;
}
</style>